<template>
  <div v-if="bottomadv" class="advbottom">
    <div class="advtip f12">广告</div>
    <div v-if="bottomadv.data.adv_type == 1 || bottomadv.data.adv_type == 2" @click="golink">
      <img :src="domain+bottomadv.data.url" alt="" class="advimg" />
    </div>
    <div v-if="bottomadv.data.adv_type == 3" @click.stop="golink" class="videobox">
      <!-- <VideoAdv v-if="bottomadv.data.url" id="myvideo" :url="domain + bottomadv.data.url" height="160px" /> -->
      <video ref="video"
        v-if="bottomadv.data.url"
        width="100%"
        muted
        preload
        autoplay
        controls
        style="object-fit:fill"
        webkit-playsinline="true"  
        x-webkit-airplay="true"
        playsinline="true"
        x5-video-player-type="h5"
        x5-video-orientation="h5"
        x5-video-player-fullscreen="true"
        id="myvideo" loop 
        :src="domain + bottomadv.data.url" height="160px" class="advimg"></video>
        <div class="prism-big-play-btn" @click.stop="autoPlay('myvideo')"></div>
    </div>
  </div>
</template>

<script>
import VideoAdv from '@/components/comm/VideoAdv'
import { isExternal } from "@/utils/validate";
export default {
  data() {
    return {
      advert: JSON.parse(sessionStorage.getItem("taskInfo")).advert,
      bottomadv: null,
    };
  },
  components:{
    VideoAdv
  },
  created() {
    console.log("this.advert:", this.advert);
    if (this.advert.length) {
      this.advert.forEach((item) => {
        if (item.position == 2 && item.status == 1) {
          this.bottomadv = item;
        }
      });
    }
  },
  mounted(){
    if(this.bottomadv){
        if(this.bottomadv.data.url && this.bottomadv.data.adv_type == 3){
          // this.autoPlay('myvideo')
          document.addEventListener("click", this.playVideoOnGesture);
          document.addEventListener("touchstart", this.playVideoOnGesture);
        }
    }
    
  },
  methods:{
    golink(){
        let link = this.bottomadv.data.link || 'https://lottery.yywlcm.com/#/';
        if (!link) return;
        if (!isExternal(link)) {
            this.$toast("无效链接");
            return;
        }
        location.href = link;
    },

    playVideoOnGesture(){
      const video = this.$refs.video;
      // 确保在移动设备中调用播放方法时使用用户手势触发
      if (typeof video.play === "function") {
        video.play().catch((error) => {
          // 播放失败的处理
          console.error("视频自动播放失败:", error);
        });
      }
    },

    autoPlay(id){
        if(this.bottomadv.data.url==''){
            return
        }
        var video = document.getElementById(id),
        play = function(){  
          video.play();  
          document.removeEventListener("touchstart",play, false);  
        };  
        document.addEventListener("WeixinJSBridgeReady", function () {  
          play();  
        }, false);  
        document.addEventListener('YixinJSBridgeReady', function() {  
          play();  
        }, false);  
        document.addEventListener("touchstart",play, false);  
        // this.playStatus=true
    },
  },
  beforeDestroy() {
    // 移除事件监听器
    document.removeEventListener("click", this.playVideoOnGesture);
    document.removeEventListener("touchstart", this.playVideoOnGesture);
  },
};
</script>

<style lang="scss" scoped>
.advbottom {
  //   position: absolute;
  //   bottom: 0;
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  .advimg{
    width: 100%;
    height: 160px;
  }
}
.prism-big-play-btn{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.advtip{
  position: absolute;
  right: 10px;
  top: 10px;  
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: rgba($color: #000000, $alpha: 0.2);
}

</style>